<template>
  <div class="bottom-content flex-row">
    <div class="left-main">
      <div class="left-item">
        <div class="title-row flex-row">
          <!-- <span class="title">课程学习</span> -->
          <!-- <span class="setting">详细设置</span> -->
        </div>
        <div class="form flex-row">
          <div class="form-item flex-row" style="width: 100%;">
            <span class="label">为班级制定学习计划</span>
            <el-switch
              v-model="data.plan_is_opened"
              @change="planSwitch('plan_is_opened')"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </div>
          <div class="form-item flex-row" style="width: 100%;">
            <span class="label">学习结束后</span>
            <el-select
              size="small"
              v-model="data.study_finished_continue_type"
              @change="studyFinishedContinueType('study_finished_continue_type')"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="form-item flex-row">
            <div class="title">课程学习</div>
            <div class="label-value">
              <span class="label">学习时间</span>
              <el-date-picker
                size="small"
                @change="setTime('lesson_study_time')"
                v-model="data.lesson_study_time"
                type="daterange"
                start-placeholder="不限"
                end-placeholder="不限">
              </el-date-picker>
            </div>
          </div>
           <div class="form-item flex-row">
            <div class="title">实践技能</div>
            <div class="label-value">
              <span class="label">学习时间</span>
              <el-date-picker
                size="small"
                v-model="data.task_time"
                @change="setTime('task_time')"
                type="daterange"
                start-placeholder="不限"
                end-placeholder="不限">
              </el-date-picker>
            </div>
          </div>
           <div class="form-item flex-row">
            <div class="title">听力训练</div>
            <div class="label-value">
              <span class="label">学习时间</span>
              <el-date-picker
                size="small"
                v-model="data.hearing_time"
                @change="setTime('hearing_time')"
                type="daterange"
                start-placeholder="不限"
                end-placeholder="不限">
              </el-date-picker>
            </div>
          </div>
          <div class="form-item flex-row">
            <div class="title">口语测评</div>
            <div class="label-value">
              <span class="label">学习时间</span>
              <el-date-picker
                size="small"
                v-model="data.oral_time"
                @change="setTime('oral_time')"
                type="daterange"
                start-placeholder="不限"
                end-placeholder="不限">
              </el-date-picker>
            </div>
          </div>
          <div class="form-item flex-row">
            <div class="title">案例分析</div>
            <div class="label-value">
              <span class="label">学习时间</span>
              <el-date-picker
                size="small"
                v-model="data.g_case_time"
                @change="setTime('g_case_time')"
                type="daterange"
                start-placeholder="不限"
                end-placeholder="不限">
              </el-date-picker>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="left-item">
        <div class="title-row flex-row">
          <span class="title">课程任务</span>
          <span class="setting">详细设置</span>
        </div>
        <div class="form flex-row">
          <div class="form-item flex-row">
            <span class="label">任务开关</span>
            <el-switch
              v-model="value"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </div>
          <div class="form-item flex-row">
            <span class="label">任务推送</span>
            <el-switch
              v-model="value"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </div>
          <div class="form-item flex-row">
            <span class="label">任务限时</span>
            <el-select size="small" v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="form-item flex-row">
            <span class="label">任务解析</span>
            <el-switch
              v-model="value"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </div>
        </div>
      </div> -->
      <!-- <div class="left-item">
        <div class="title-row flex-row">
          <span class="title">课程考试</span>
          <span class="setting">详细设置</span>
        </div>
        <div class="form flex-row">
          <div class="form-item flex-row">
            <span class="label">考试开关</span>
            <el-switch
              v-model="value"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </div>
          <div class="form-item flex-row">
            <span class="label">考试限时</span>
            <el-switch
              v-model="value"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </div>
          <div class="form-item flex-row">
            <span class="label">试卷解析</span>
            <el-switch
              v-model="value"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </div>
        </div>
      </div> -->
    </div>
    <!-- <div class="right-main">
      <div class="title">章节设置</div>
      <ul class="tab-list flex-row">
        <li class="tab">章节名称</li>
        <li class="tab">学习</li>
        <li class="tab">解析</li>
      </ul>
      <div class="content">
        <div class="list-lesson" v-for="(item, index) of [1,2,3,4]" :key="index">
          <div class="item-lesson flex-row" v-for="(item, index) of [1,2,3,4]" :key="index">
            <div class="item">Lesson 1 Making An Orientation</div>
            <div class="item">
              <el-switch
                v-model="value"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </div>
            <div class="item">
              <el-switch
                v-model="value"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </div>
          </div>
      </div>
      </div>

    </div> -->
  </div>
</template>

<script>
import {
  getPlan,
  planSwitch,
  studyFinishedContinueType,
  setTime
} from '@/api/lesson-setting/plan'
import { mapGetters } from 'vuex'

export default {
  name: 'index',
  data () {
    return {
      data: {},
      options: [{
        value: '1',
        label: '可以学习，但不更新成绩'
      }, {
        value: '0',
        label: '不可以学习'
      }]
    }
  },
  props: {
    schoolId: {
      type: Number,
      default: 0
    }
  },
  computed: {
    ...mapGetters([
      'loginInfo'
    ])
  },
  components: {},
  mounted () {
    this.getPlan()
  },
  methods: {
    // 获取所有数据
    async getPlan () {
      const res = await getPlan({
        class_id: this.loginInfo.classId,
        resource_lesson_id: this.loginInfo.resourceLessonId
      })
      if (res.code === '200') {
        const obj = {}
        Object.assign(obj, {
          plan_is_opened: res.data.plan_is_opened === '1',
          lesson_study_time: res.data.lesson_study_start_time ? [res.data.lesson_study_start_time, res.data.lesson_study_end_time] : [],
          hearing_time: res.data.hearing_start_time ? [res.data.hearing_start_time, res.data.hearing_end_time] : [],
          task_time: res.data.task_start_time ? [res.data.task_start_time, res.data.task_end_time] : [],
          oral_time: res.data.oral_start_time ? [res.data.oral_start_time, res.data.oral_end_time] : [],
          g_case_time: res.data.g_case_start_time ? [res.data.g_case_start_time, res.data.g_case_end_time] : [],
          study_finished_continue_type: res.data.study_finished_continue_type
        })
        this.data = obj
      } else {
        this.$message.error(res.message)
      }
    },
    // 为班级制定学习计划
    async planSwitch (key) {
      const param = {
        class_id: this.loginInfo.classId,
        resource_lesson_id: this.loginInfo.resourceLessonId,
        school_id: this.schoolId,
        tea_id: this.loginInfo.userId,
        isOpen: this.data[key] ? '1' : '0'
      }
      const res = await planSwitch(param)
      if (res.code === '200') {
        this.$message.success('设置成功')
      } else {
        this.$message.error(res.message)
      }
    },
    // 学习结束后设置
    async studyFinishedContinueType (key) {
      const param = {
        class_id: this.loginInfo.classId,
        resource_lesson_id: this.loginInfo.resourceLessonId,
        school_id: this.schoolId,
        tea_id: this.loginInfo.userId,
        type: Number(this.data[key])
      }
      const res = await studyFinishedContinueType(param)
      if (res.code === '200') {
        this.$message.success('设置成功')
      } else {
        this.$message.error(res.message)
      }
    },
    // 学习时间设置
    async setTime (key) {
      const time = this.data[key]
      const value = [this.formatTime(time[0]), this.formatTime(time[1])]
      const param = {
        class_id: this.loginInfo.classId,
        resource_lesson_id: this.loginInfo.resourceLessonId,
        school_id: this.schoolId,
        tea_id: this.loginInfo.userId,
        value
      }
      let keys = []
      let url = ''
      if (key === 'lesson_study_time') {
        keys = ['lesson_study_start_time', 'lesson_study_end_time']
        url = 'lesson/int_edu_lesson_set_detail'
      } else if (key === 'task_time') {
        keys = ['task_start_time', 'task_end_time']
        url = 'training_set/int_edu_lesson_training_set_detail'
      } else if (key === 'hearing_time') {
        keys = ['hearing_start_time', 'hearing_end_time']
        url = 'training_set/int_edu_lesson_training_hearing_set_detail'
      } else if (key === 'oral_time') {
        keys = ['oral_start_time', 'oral_end_time']
        url = 'training_set/int_edu_lesson_training_oral_set_detail'
      } else if (key === 'g_case_time') {
        keys = ['g_case_start_time', 'g_case_end_time']
        url = 'training_set/int_edu_lesson_r_g_case_set'
      }
      Object.assign(param, {
        keys,
        url
      })
      const res = await setTime(param)
      if (res.code === '200') {
        this.$message.success('设置成功')
      } else {
        this.$message.error(res.message)
      }
    },
    // 时间格式处理（20191023）
    formatTime (date) {
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      let d = date.getDate()
      let mm = String(m).length === 1 ? '0' + m : m
      let dd = String(d).length === 1 ? '0' + d : d
      return y + '-' + mm + '-' + dd
    }
  }
}
</script>
<style scoped lang="scss">
.course-setting {
  .bottom-content {
    width: 100%;
    margin-bottom: 30px;
    .left-main {
      // width:452px;
      width: 100%;
      // height:842px;
      height: auto;
      background:rgba(255,255,255,1);
      border:1px solid rgba(229,229,229,1);
      border-radius:0px 0px 5px 5px;
      .left-item {
        padding: 30px 22px;
        // border-bottom:1px dashed rgba(229,229,229,1);
        .title-row {
          .title {
            font-size:18px;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(16,29,55,1);
          }
          .setting {
            font-size:14px;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(0,156,246,1);
            cursor: pointer;
          }
        }
        .form {
          width: 100%;
          flex-wrap: wrap;
          text-align: left;
          .form-item {
            display: inline-block;
            width: 43%;
            justify-content: flex-start;
            margin-top: 30px;
            .label-value {
              margin-top: 15px;
            }
            .label {
              min-width:56px;
              font-size:14px;
              font-family:PingFang SC;
              font-weight:400;
              color:rgba(16,29,55,1);
              margin-right: 10px;
            }
          }
        }
      }

    }
    // .right-main {
    //   width:728px;
    //   height:842px;
    //   background:rgba(255,255,255,1);
    //   border:1px solid rgba(229,229,229,1);
    //   .title {
    //     width:100%;
    //     padding: 20px 0 30px 20px;
    //     font-size:18px;
    //     font-family:PingFang SC;
    //     font-weight:400;
    //     color:rgba(16,29,55,1);
    //   }
    //   .tab-list {
    //     width: 100%;
    //     height:44px;
    //     background:rgba(245,245,246,1);
    //     line-height: 44px;
    //     padding: 0 20px;
    //     .tab {
    //       width: 15%;
    //       text-align: center;
    //       &:first-child {
    //         width: 70%;
    //         text-align: left;
    //       }
    //     }
    //   }
    //   .content {
    //     height: 730px;
    //     overflow-y: scroll;
    //     background: #fff;
    //     .list-lesson {
    //       margin: 0 20px;
    //       border-bottom: 1px dashed #E5E5E5;
    //       .item-lesson {
    //         .item {
    //           height:50px;
    //           line-height: 50px;
    //           width: 15%;
    //           text-align: center;
    //           &:first-child {
    //             width: 70%;
    //             text-align: left;
    //           }
    //         }
    //       }
    //     }
    //   }
    // }
  }
}

</style>
